<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>学习组件的使用</h3>
        <city-qj></city-qj>
         <br>
         <comp1></comp1>
         <comp1></comp1>
         <br>

    </div>
    <script src="./vue.js"></script>
    <script>
        // 1. 组件是什么
        //  组件是可复用的Vue实例。
        
        // 2. 如何定义
        // new Vue ({
        //     el:,//
        //     components: {
        //         // 定义组件
        //         // 组件名1 : 对组件的配置项,它是一个对象.
        //         //          在new Vue({ }) 可以写的配置项，在组件中基本上都可以用
        //         comp1: {
        //             // 组件的data与vue实例有一点区别：它必须是一个函数，通过这个函数来返回对象，
        //             // 在对象中定义自己的数据项
        //             data: function() { 
        //                 return { 
        //                     // 组件自己的数据项
        //                 }
        //             },
        //             // 用来约定组件的模板。它等价于vue实例的 el
        //             // 它只能一个根元素
        //             // template: `<div></div><h1></h1>` // 不ok
        //             template: `<div></div>` // ok
        //             watch:,
        //             computed:,
        //             filters,
        //             directives,
        //             components,

        //         }
        //     }
        // })
        
        // 3. 如何使用
        //    像使用dom标签一样使用，标签就是组件名


        // 要点：
        // 1.  数据。
        //     组件是自成体系，它的数据只能自己用，在其它组件不能使用；它不能直接使用vue实例中的数据
        //     格式：data(){ return {} }
        // 2. 视图。
        //    由template决定。只能有一个根元素.
        // 3. methods
        //    与vue实例中的一样，定义，去调用。
        //    它只能调用自己的定义的methods

        const vm = new Vue({
            el: '#app',
            data: {
                name: 'js'
            },
            methods: {
                f1 () {

                }
            },
            components: {
                "city-qj": {
                    // 只能在当前组件中使用
                    data() {
                        return {
                            teC: '小龙虾'
                        }
                    },
                    // 设置视图
                    template: `<div>
                                <h4>城市：潜江</h4>
                                <p>{{teC}}</p>
                                <button @click="hClick">点我</button> 
                            </div>`,
                    methods: {
                        hClick () {
                            // 它的this是组件自己
                            console.log(this.teC)
                        }
                    }
                },
                comp1: {
                    template: '<div><h1>comp1组件</h1></div>'
                }
            }
            

        })

    </script>
</body>
</html>